<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOM事件</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div class="box" style="width: 300px; height: 300px; background-color: green; color: red; font-size: 30px; text-align: center;">
		点我
	</div>
	<script>
		var box = document.querySelector('.box')
		console.log(box)
		var flag = true
		var num = 0
		// function changeText(id) {
		// 	if (flag) {
		// 		box.innerHTML = "谢谢"
		// 		flag = false
		// 	}else {
		// 		box.innerHTML = "不客气"
		// 		flag = true
		// 	}
			
		// }
		box.addEventListener('click', myFun)
		function myFun() {
			if (flag) {
				box.style.backgroundColor = 'yellow'
				flag = false
				num++
			}else {
				box.style.backgroundColor = 'blue'
				flag = true
				num++
			}
			if(num === 4) {
				box.removeEventListener('click', myFun)
			}
		}
		// box.onmouseover = function() {
		// 	box.innerHTML = '鼠标经过'
		// 	console.log(1222)
		// }
		// box.onmouseout = function() {
		// 	box.innerHTML = "鼠标离开"
		// 	console.log(3333)
		// }

		box.addEventListener("mouseover", function() {
			box.innerHTML = '监听鼠标经过事件'
		})
		box.addEventListener("mouseout", function() {
			box.innerHTML = '监听鼠标离开事件'
		})
	</script>
</body>
</html>